<template>
    <div class="userShowClass">
      <div class="main_show_div">
      <el-row class="main_show">
        <el-col :span="9" class="left_show">
          <div class="el-col-12 userImage">
            <el-avatar :size="120" fit="fill" class="tou" :src="user.imageUrl" ></el-avatar>
          </div>
          <div class="el-col-12 userInfo_nick">
            <div class="userInfo_top">
              <span style="font-size: 30px;font-weight: bolder">{{user.nickname}}</span><br>
              <span>{{user.signature}}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="15" class="info_show">

        </el-col>
      </el-row>
      </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'UserShow',
  data () {
    return {
      userInfo: {

      }
    }
  },
  computed: mapState({
    user: 'user',
    isLogin () {
      if (this.$store.state.user.userId) {
        return true
      } else {
        return false
      }
    }
  })
}
</script>

<style scoped>
  .main_show{
    height: 170px;
  }
  .left_show {
    text-align: center;
    height: 170px;
    display: inline-block;
    padding: 25px 0px;
  }
  .userImage{
  }
  .info_show{
    text-align: center;
  }
  .tou {
    margin:0px;
    display: inline-block;
    border: 4px solid #FFF;
  }
  .userInfo_nick{

    height: 170px;
  }
  .userInfo_top{
    height: 120px;
    display: table-cell;
    /*设置文本垂直居中*/
    vertical-align:middle;
    padding: 0px;
    text-align: left;
  }
  .userInfo_top span{
    color: #FFF;
  }
  .userShowClass{
    background-image: url('https://static3.sycdn.imooc.com/static/img/u/temp1.png')
  }
  .main_show_div{
    width: 1200px;
    margin: 0px auto;
  }
</style>
